<template>
  <div>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">购物车系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li v-if="nickName"><a href="#">{{nickName}}</a></li>
            <li v-if="!nickName"><a href="#" data-toggle="modal" @click="showLogin" data-target="#myModal">登陆</a></li>
            <li><a href="#" @click="logOut">退出</a></li>
            <li><a href="#"> <span class="badge glyphicon glyphicon-unchecked">{{cartCount}}</span></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                 aria-expanded="false">用户 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <login :is-login="isLogin" @changename="getName"></login>
  </div>

</template>

<script>
  import Login from '@/components/Login'
  import axios from 'axios'
  import {mapState} from 'vuex'

  export default {
    name: "Header",
    data() {
      return {
        isLogin: false,
        // nickName: '',
      }
    },
    components: {
      Login
    },
    computed: {
      //对象类型
      ...mapState(['nickName','cartCount'])
      // nickName: {
      //   get:function(){
      //     return this.$store.state.nickName
      //   },
      //   set:function(){}
      // },
      // cartCount(){
      //   return this.$store.state.cartCount
      // }
    },
    mounted() {
      this.checkedLogin();
      //登陆接口调用
      // this.getCartCount()
    },
    methods: {
      checkedLogin: function () {
        var self = this;
        axios.get("/users/checkedLogin").then(function (res) {
          var res = res.data;
          console.log(res);
          if (res.status == '0') {
            self.$store.commit("updateUserInfo", res.result);
             self.getCartCount();
            // self.nickName = res.result;

          }
        })
      },
      getName: function (obj) {
        this.nickName = obj;
      },
      showLogin: function () {
        this.isLogin = true
      },
      logOut: function () {
        var self = this;
        axios.post("/users/logout").then(function (res) {
          var res = res.data;
          if (res.status == '0') {
            // self.nickName = '';
            self.$store.commit("updateUserInfo", '')
            self.$store.commit("updateCartCount",0)
          }
        })
      },
      getCartCount(){
        var self = this;
        axios.get("/users/getCartCount").then(function (res) {
          var res = res.data;
          self.$store.commit("initCartCount",res.result)
        })
      }
    }
  }
</script>
